<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">

		<title>Data-Driven Documents: An Intro to D3.js</title>

		<meta name="author" content="Anna Powell-Smith">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<link rel="stylesheet" href="http://anna.ps/talks/fel/css/reveal.min.css">
		<link rel="stylesheet" href="http://anna.ps/talks/fel/css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="http://anna.ps/talks/fel/lib/css/zenburn.css">

		<style>
			.reveal img, .reveal iframe {
				max-width: 120%;
				max-height: 120%;
			}
			.reveal pre {
				margin: 15px;
				padding-left: 20px;
			}
		</style>
		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script><link rel="stylesheet" href="./D3_files/paper.css" type="text/css" media="print">

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
		
		<style>
		.highlight { 
			color: red;
		}
		div.mini { 
			margin-top: 10px;
			font-size: 0.7em;
		}
		span.mini { 
			margin-top: 10px;
			font-size: 0.7em;
		}
		table.layouts { 
			font-size: 0.6em;
			width: 100%;
		}
		table.layouts td { 
		    width: 16%;
		text-align: center;
		}
		img { 
			 max-height: 400.0px; 
			width: 90%; 
			max-width: 500px;
		}
    </style>
	</head>

	<body style="-webkit-transition: -webkit-transform 0.8s ease;">

		<div class="reveal center">

			<div class="slides">
			    <section style="top: -321px; display: block;" class="present">
			<h3>D3.JS:&nbsp;DATA-DRIVEN DOCUMENTS</h3>
			<iframe src="http://bl.ocks.org/mbostock/raw/1256572/" style="width: 1200px;height: 500.0px;"></iframe>
			<p style="font-size: 0.5em;">Source: Mike Bostock's <a href="http://bl.ocks.org/1256572" class="roll"><span data-title="Show Reel
			">Show Reel
			</span></a>
			</p>
			<p>Uday Kumar Pyda - &nbsp;<a href="http://iwe.cisco.com/web/view-post/post/-/posts?postId=331100053" class="roll"><span data-title="Speed Learning Session">Speed Learning Session</span></a><br> March 1st 2013</p>

			</section>
			    
			    <section style="top: -390px; display: block;" class="future">
			        <h2>WHAT IS D3?</h2>
			<div>A JavaScript library for creating data visualisations</div>
			<div>"jQuery for SVG"</div>
			<div>
			    <a href="http://d3js.org/"><img src="./D3_files/d3js.png"></a>
			    <br>
			</div>
			<div>
			    <a href="http://d3js.org/" class="roll"><span data-title="http://d3js.org">http://d3js.org</span></a>
			</div>
			<div style="text-align: left;">
			    <br>
			</div>

			</section>
			
			    <section style="top: -277.5px; display: block;" class="future">
			        <h2>WHAT IS D3?</h2>
			<div style="text-align: left;">The <a href="https://github.com/mbostock/d3" class="roll"><span data-title="eighth most starred library on GitHub">eighth most starred library on GitHub</span></a></div>
			   <br>
			<div style="text-align: left;">127KB minified</div>
            <br>
			<div style="text-align: left;">BSD licensed (BSD-new)</div>   <br>
			<div style="text-align: left;">Created by <a href="http://bost.ocks.org/mike/" class="roll"><span data-title="Mike Bostock">Mike Bostock</span></a> while at Stanford</div>   <br>
			<div style="text-align: left;">Development now sponsored by the New York Times</div>

			</section>
			
			        <section style="top: -20px; display: none;" class="future">
			            <h2>WHERE DID D3 COME FROM?</h2>
			            <div>
			                <br>
			            </div>
			            <div>
			                <b>2005: Prefuse</b> (Java, Heer, Berkeley)</div>
			                <div>|</div>
			                <div>
			                    <b>2007: Flare</b> (<span style="line-height: 1.2em;letter-spacing: -0.02em;">ActionScript, Heer, Berkeley)</span>
			                </div>
			                <div>|</div>
			                <div>
			                    <b>2009: Protovis</b> (<span style="line-height: 1.2em;letter-spacing: -0.02em;">JavaScript, Heer/Bostock, Stanford)</span>
			                </div>
			                <div>|</div>
			                <div>
			                    <b>2011: D3</b> (<span style="line-height: 1.2em;letter-spacing: -0.02em;">JavaScript, Heer/Bostock, Stanford)</span>
			                </div>

			        
			            </section>
			            <section style="top: -20px; display: none;" class="future">
			                <h2>WHY D3?</h2>
			<div>Other libraries: proprietary methods for visualising</div>
			                <div>Convenient, but tricky to extend or debug</div>
			<pre style="text-align: center;"><span style="color:#AAAA00">var plot1 = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);</span>
			</pre>
			<div>
			    <a href="http://www.jqplot.com/tests/line-charts.php"><img src="./D3_files/jqplot.png"></a>
			                <br>
			</div>
			</section>
			                <section style="top: -20px; display: none;" class="future">
			                    <h2>WHY D3?</h2>
			<div>D3: <span class="highlight">solves the fundamental problem</span></div>
			<div>Bind data directly to the DOM</div>
			<pre>var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var w = 500, h = 100;

var svg = d3.select("body").append("svg")
	.attr("width", w).attr("height", h);

<span style="color: #AAAA00;">svg.selectAll("rect").data(dataset)</span>
	.enter().append("rect")
	.attr("x", function(d, i) {
	 return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	 return h - (d * 4);
	})
	.attr("width", w / dataset.length)
	.attr("height", function(d) {
	 return d * 4;
	})
	.attr("fill", function(d) {
	 return "rgb(0, 0, " + (d * 10) + ")";
	});
	</pre>











			</section>
			                    <section style="top: -20px; display: none;" class="future">
			                        <h2>WHY D3?</h2>
			                        <div>View and debug the output with Firebug</div>

			<div>
			    <img src="./D3_files/firebug.png">
			    <br>
			</div>
			</section>
			                        <section style="top: -20px; display: none;" class="future">
			                            <h2>THE D3 DIFFERENCE</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">Solves&nbsp;<b>the fundamental problem</b> of data visualisation: manipulate the DOM with data</div>
			                            <div style="text-align: left;">
			                                <br>
			                            </div>
			                            <div style="text-align: left;"><b>Web standards</b>: style with CSS, interact with JS events, debug with DevTools/Firebug</div>
			                            <div style="text-align: left;">
			                                <br>
			                            </div>
			                            <div style="text-align: left;">Fast, simple and <b>efficient</b>
			                        </div>
			                        <div style="text-align: left;">
			                            <br>
			                        </div>
			                        <div style="text-align: left;">Fantastic support for <b>animations and transitions</b>
			                    </div>
			                    <div style="text-align: left;">
			                        <br>
			                    </div>
			                    <div style="text-align: left;">Encourages code modularity with <b>plugins</b>
			                </div>
			            </section>
			            
<section style="top: -20px; display: none;" class="future">
			                            <h2>THE D3 DIFFERENCE (Contd)</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">Not a graphical representation</div>
			                            <div style="text-align: left;"><br></div>
			                            <div style="text-align: left;">Create SVG elements using D3, Can style them with external CSS</div>
			                            <div style="text-align: left;"><br></div>
			                            <div style="text-align: left;">New features introduced by browser vendors are immediately supported</div>
			                            <div style="text-align: left;"><br></div>
			                            <div style="text-align: left;">Not a developer's nightmare - Easy to debug</div>
			                            <div style="text-align: left;"><br></div>
			                            
			            </section>
			            			            
			            <section style="top: -20px; display: none;" class="future">
				<br>
			                <h2>
			    <font color="#999900">BUT IS IT AWESOME??</font>
			</h2>


			</section>
			                <section style="top: -20px; display: none;" class="future">
			                    <h2>EXAMPLES</h2>
			<iframe src="http://bl.ocks.org/mbostock/raw/4060954" style="width: 1200px;height: 500.0px;">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#10;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;</iframe>
			<p>Source: Mike Bostock's <a href="http://bl.ocks.org/4060954" class="roll"><span data-title="streamgraph example">streamgraph example</span></a>
				<br><span class="mini">(click on the button to load new data)</span>
			</p>

			</section>
			                    <section style="top: -20px; display: none;" class="future">
			                        <h2>EXAMPLES</h2>
			<iframe src="http://bl.ocks.org/mbostock/raw/4062045/" style="width: 1200px;height: 500.0px;">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#10;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;</iframe>
			<p>Source: Mike Bostock's <a href="http://bl.ocks.org/4062045/" class="roll"><span data-title="force-directed graph example">force-directed graph example</span></a>
				<br><span class="mini">(click and drag to interact)</span>
			</p>





			</section>
			                        <section style="top: -20px; display: none;" class="future">
			                            <h2>EXAMPLES</h2>
			<iframe src="http://bl.ocks.org/mbostock/raw/3231298/" style="width: 1200px;height: 500.0px;">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#10;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;</iframe>
			<p>Source: Mike Bostock's <a href="http://bl.ocks.org/3231298/" class="roll"><span data-title="Collision Detection">Collision Detection</span></a>
				<br><span class="mini">(Try touching the circles)</span>
				
<br><br>
A more meaningful visualization : <a href="http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html" class="roll" target="new"><span data-title="Obama - Budget Proposal">Obama - Budget Proposal</span></a>				
			</p>






			</section>
			                            <section style="top: -20px; display: none;" class="future">
			                                <h2>EXAMPLES</h2>
			<iframe src="http://bl.ocks.org/mbostock/raw/1062544/" style="width: 1000px;height: 500px;">&amp;amp;amp;amp;amp;amp;amp;amp;#10;</iframe>
			<p>Source: Mike Bostock's <a href="http://bl.ocks.org/1062544" class="roll"><span data-title="OMG Particles">OMG Particles</span></a>
				<br><span class="mini">(try mousing over)</span>
			</p>

			</section>

<section style="top: -20px; display: none;" class="future">
			                                <h2>EXAMPLES</h2>
			<iframe src="http://bl.ocks.org/mbostock/raw/1153292/" style="width: 1000px;height: 500px;"></iframe>
			<p>Source: Thomson Reuters <a href="http://bl.ocks.org/mbostock/raw/1153292/" class="roll"><span data-title="Mobile Patent Suits">Mobile Patent Suits</span></a>
				<br><span class="mini">(Who's in trouble?)</span>
			</p>

			</section>
			


			            <section style="top: -20px; display: none;" class="future">
				<br>
			                <h2>
			   FUNDAMENTALS
			</h2>


			</section>
			
<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Create a single Circle element on the screen. <br>
<pre>
<span style="color: #AAAA00;">
svg.append("circle")
    .attr("cx", 20)
    .attr("cy", 20)
    .attr("r", 2.5);</span>
    </pre><br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">How do you create a bunch of such elements?<br></div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">- You could just use a FOR LOOP <br></div>
<div style="text-align: left;">- Not effective, Not extensible, Its a mess..<br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Try to understand this piece of code <br>
<pre>
<span style="color: #AAAA00;">
svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);
</span>
</pre><br></div>
<div style="text-align: left;">What are <span style="color: #AAAA00;">data</span> and <span style="color: #AAAA00;">d</span> here?<br></div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Run this piece of code in your mind again, this time by providing data <br></div>
<div style="text-align: left;"><pre>
<span style="color: #AAAA00;">
svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);
<br><br>
data = [{"x":1.0,"y":1.1}, {"x":2.0,"y":2.5}, {"x":4.0,"y":1.5}]
</span>
</pre><br></div>
<div style="text-align: left;">What do you expect to see on the screen?<br></div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Don't tell D3 <span style="color: #AAAA00;">how to do</span> something but <span style="color: #AAAA00;">what you want</span><br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Powerful concept called <span style="color: #AAAA00;">Data-Join</span><br></div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Whats the mystery here?<br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">1) Select something : <span style="color: #AAAA00;">.selectAll("circle")</span> returns the empty selection, since the SVG container element (svg) is empty. No magic here.<br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">2) The empty selection is joined to data using the data method : <span style="color: #AAAA00;">.data(data)</span><br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">3) Creates 3 virtual selections - Enter, Update and Exit<br></div>
<div style="text-align: left;">Enter - Data present, No corresponding DOM elements<br>
Update - Data present, Corresponding DOM elements present<br>
Exit - No data for a corresponding DOM element<br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">4) Missing elements are added to the DOM : <span style="color: #AAAA00;">.append("circle")</span><br></div>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">5) Attributes applied to the newly added elements : <span style="color: #AAAA00;">.attr("cx", function(d) { return d.x; })</span><br></div>
</section>						


<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Data-Join - Venn Diagram<br></div>
<div style="text-align: left;"><img src="./D3_files/venn.png"><br></div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - ENTER AND EXIT</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">Imagine running this code repeatedly<br>

<pre>
<span style="color: #AAAA00;">
function callMeAgainAndAgain(newData) {

	var circle = svg.selectAll("circle")
    			.data(newData);

	circle.enter().append("circle")
    	    .attr("r", 2.5);

	circle
    	    .attr("cx", function(d) { return d.x; })
    	    .attr("cy", function(d) { return d.y; });

	circle.exit().remove();

}
</span>
</pre>
</div>
<div style="text-align: left;">The circles start moving, New circles start getting created, Old ones start getting removed from the DOM</div>
</section>

<section style="top: -20px; display: none;" class="future">
<h2>CONCEPT - SIMPLE EXAMPLE</h2>
<div style="text-align: left;"><br></div>
<div style="text-align: left;">- Randomly select a bunch of alphabets and use it as Data <br></div>
<div style="text-align: left;">- Enter Selection alphabets (green) drop in to view from the top<br></div>
<div style="text-align: left;">- Update Selection ones turn black stay there and rearrange<br></div>
<div style="text-align: left;">- Exit Selection ones turn red and drop  off<br></div>
			<iframe src="http://bl.ocks.org/mbostock/raw/3808234/" style="width: 1000px;height: 500px;"></iframe>
</section>
			
			                                <section style="top: -20px; display: none;" class="future">
			                                    <h2>DATA BINDING</h2>
			<div>jQuery-like selectors to simplify DOM API</div>
			<div>
			    <br>
			</div>
			<pre>var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var w = 500, h = 100;

var svg = d3.select("body").append("svg")
	.attr("width", w).attr("height", h);

<span style="color: #AAAA00;">svg.selectAll("#graph rect.cities")</span>.data(dataset)
	.enter().append("rect")
	.attr("x", function(d, i) {
	  return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	  return h - (d * 4);
	})
	.attr("width", w / dataset.length - barPadding)
	.attr("height", function(d) {
	  return d * 4;
	})
	.attr("fill", function(d) {
	  return "rgb(0, 0, " + (d * 10) + ")";
	});
</pre>


			</section>
			                                    <section style="top: -20px; display: none;" class="future">
			                                        <h2>DATA BINDING</h2>
			<div>Set properties using functions of data - very powerful</div>
			<div>
			    <br>
			</div>
			<pre>var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var w = 500, h = 100;

var svg = d3.select("body").append("svg")
	.attr("width", w).attr("height", h);

svg.selectAll("#graph rect.cities").data(dataset)
	.enter().append("rect")
	.attr("x", function(d, i) {
	  return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	  return h - (d * 4);
	})
	.attr("width", w / dataset.length - barPadding)
	<span style="color: #AAAA00;">.attr("height", function(d) {
	  return d * 4;
	})
	.attr("fill", function(d) {
	  return "rgb(0, 0, " + (d * 10) + ")";
	})</span>;
</pre>

			</section>

<section style="top: -20px; display: none;" class="future">
			                                        <h2>OUTPUT</h2>
<div>
	<img src="./D3_files/firebug.png">
</div>
</section>
						
			
			<section style="top: -20px; display: none;" class="future">
			                            <h2>SELECTORS</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">
			                            - All selectors defined as per 
			                            <a href="http://www.w3.org/TR/selectors-api/" class="roll"><span data-title="W3C Selectors API">W3C Selectors API</span></a>
			                             </div>
			                            <div style="text-align: left;">- Filters<br></div>
			                            <div style="text-align: left;">
			                                - Sort<br>
			                            </div>
			                            <div style="text-align: left;">- Empty<br>
			                        </div>
			                        <div style="text-align: left;">- Call<br>
			                    </div>
			                    <div style="text-align: left;">
			                        <img src="./D3_files/selectors.png">
			                    </div>
			                    
			            </section>
			            
			
			                                        <section style="top: -20px; display: none;" class="future">
			                                            <h2>SCALES</h2>
<div><br></div>
<div style="text-align: left;">- Makes it easy to map your input data to properties<br></div>			
<div style="text-align: left;">- Quantitative : Log, Power, Linear, Quantile, Quantize<br></div>			
<div style="text-align: left;">- Oridinal scales<br></div>			
<div style="text-align: left;">- Supports Range and RangeBands<br></div>			
<div style="text-align: left;">- Supports Clamping<br></div>			
<div style="text-align: left;">- 4 sets of categorical colors provided<br></div>	
<div style="text-align: left;">- Works on time ranges as well<br></div>			
			                                                <img src="./D3_files/scales.png" style="line-height: 1.2em; font-family: &#39;Open Sans&#39;, sans-serif; font-size: 30px; letter-spacing: -0.02em;">
			                                            <div>Source: Jerome Cukier's <a href="http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/" class="roll"><span data-title="D3, Scales and Color">D3, Scales and Color</span></a>
			                                        </div>
		
			                                    </section>
			                                    
<section style="top: -20px; display: none;" class="future">
<h2>SVG Shapes</h2>
<div style="text-align: left;">- Helper functions to create all SVG shapes<br></div>			
<div style="text-align: left;">- Line, Area, Arc, Cord, Diagonal etc<br><br><br></div>			

<h2>Axes</h2>
<div style="text-align: left;">- Axes creation<br></div>			
<div style="text-align: left;">- Orientation, Scale, Tick Size, Tick Placement, TickFormat<br></div>			
</section>
			                                    
			                                    <section style="top: -20px; display: none;" class="future">
			                                        <h2>TRANSITIONS</h2>
						<p>Make your charts move</p>
						    				<br>
<pre>svg.selectAll("rect").data(dataset)
	<span style="color: #AAAA00;">.transition().duration(2500)</span>
	.attr("y", function(d) {return h - yScale(d); })
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {
	return "rgb(0, 0, " + (d * 10) + ")";
	});
			</pre>


			</section>
			
			<section style="top: -20px; display: none;" class="future">
			                            <h2>TRANSITIONS</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">- All numeric CSS Styles<br></div>
			                            <div style="text-align: left;">- Works with attributes that has numbers embedded within strings (font-size, colors etc)<br></div>
			                            <div style="text-align: left;">- Set Delay, Duration<br></div>
			                            <div style="text-align: left;">- Easing functions - Elastic, Cubic-in-out, Linear..<br></div>
			                            <div style="text-align: left;">- Tween<br></div>
			                            <div style="text-align: left;">- Chaining<br></div>
			                            <div style="text-align: left;">- Selective Transitions (based on filters)<br></div>
			                    <div style="text-align: left;">
			                        <img src="./D3_files/transitions.png">
			                    </div>
			                    
			            </section>

<section style="top: -20px; display: none;" class="future">
			                            <h2>FUNCTIONS ON ARRAYS</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">- Most mathematical functions<br></div>
			                            <div style="text-align: left;">- Helper functions (shuffle, permute etc)<br></div>
			                            <div style="text-align: left;">- Special functions for Associative Arrays<br></div>
			                            <div style="text-align: left;">- Special functions for Maps<br></div>
			                    <div style="text-align: left;">
			                        <img src="./D3_files/arrays.png">
			                    </div>
			                    
			            </section>
			            			            
<section style="top: -20px; display: none;" class="future">
			                            <h2>LOAD EXTERNAL RESOURCES</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">- Text<br></div>
			                            <div style="text-align: left;">- JSON<br></div>
			                            <div style="text-align: left;">- XML<br></div>
			                            <div style="text-align: left;">- CSV<br></div>
			                            <div style="text-align: left;">- TSV<br></div>
			                            <div style="text-align: left;">- <span style="color: #AAAA00;">Parse into data objects on the fly</span><br></div>
			                    
</section>
			            			            
<section style="top: -20px; display: none;" class="future">
			                            <h2>WORKING WITH COLORS</h2>
			                            <div>
			                                <br>
			                            </div>
			                            <div style="text-align: left;">- Working with colors is a breeze<br></div>
			                            <div style="text-align: left;">- Can work seamlessly with scales<br></div>
			                            <div style="text-align: left;">- Built-in functions to work on all formats - RGB, HSL, HCL etc<br></div>
			                            <div style="text-align: left;">
			                        <img src="./D3_files/colors.png">
			                    </div>
			                            
			                    
</section>
			            			            
			                                        <section style="top: -20px; display: none;" class="future">
			                                            <h2>LAYOUTS</h2>
			                                            <div>
<table class="layouts">
	<tbody><tr>
		<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f62756e646c652e706e67"><br>Bundle</td>
		<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f756265722e706e67"><br>Chord</td>
		<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f636c75737465722d72616469616c2e706e67"><br>Cluster</td>
				<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f666f7263652e706e67"><br>Force</td>
				<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f6e6361612e706e67"><br>Hierarchy</td>
				<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f706f70756c6174696f6e2e706e67"><br>Histogram</td>
				
					</tr>
					<tr>
			<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f7061636b2e706e67"><br>Pack</td>
			<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f73756e62757273742e706e67"><br>Partition</td>
		<td>
			<img width="100" src="./D3_files/piechart.png"><br>Pie</td>
			<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f737461636b2e706e67"><br>Stack</td>
			<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f747265652e706e67"><br>Tree</td>
			<td><img width="100" src="./D3_files/687474703a2f2f64336a732e6f72672f65782f747265656d61702e706e67"><br>Treemap</td>
			</tr>
</tbody></table>
<p>Key point: D3 layouts <strong> don't draw your graphs for you</strong>. They just do the heavy data lifting</p>
			                                            </div>
			                                            <div>
			                                            	<a href="http://bl.ocks.org/mbostock" class="roll"><span data-title="Plenty of examples">Plenty of examples</span></a>
			                                            </div>
			                                        </section>
			                                        <section style="top: -20px; display: none;" class="future">
			                                            <h2>LIMITATIONS</h2>
			                                            <div style="text-align: left;">
			                                                <span style="letter-spacing: -0.02em;line-height: 1.2em;">
			                                                    <br>
			                                                </span>
			                                            </div>
			                                            <div style="text-align: left;">
			                                                <span style="letter-spacing: -0.02em;line-height: 1.2em;">1. <b>SVG</b>: no IE8 support, older Android</span>
			                                                <br>
			                                            </div>
			                                            <div style="text-align: left;">
			                                                <br>
			                                            </div>
			                                            <div style="text-align: left;">2. <b>Steep learning curve for simple graphs</b>: but try <a href="http://code.shutterstock.com/rickshaw/" class="roll"><span data-title="Rickshaw.js">Rickshaw.js</span></a>, <a href="http://nvd3.org/" class="roll"><span data-title="NVD3">NVD3</span></a>
			                                        </div>
			                                        <div style="text-align: left;">
			                                            <br>
			                                        </div>
			                                        <div style="text-align: left;">3. <b>Can't hide underlying data</b>: always visible&nbsp;</div>
			                                        <div style="text-align: left;">
			                                            <br>
			                                        </div>
			                                        <div style="text-align: left;">4. <b>DOM rendering can be slow with many elements</b>: if you need to draw thousands of points, consider canvas instead</div>
			                                    </section>
			                                    <section style="top: -20px; display: none;" class="future">
			                                        <h2>IE8 APPROACHES</h2>
			<div>
			    <br>
			</div>
			<div style="text-align: left;">1.<b>
			    <a href="https://github.com/shawnbot/aight" class="roll"><span data-title=" Aight "> Aight </span></a>
			    </b>- stops D3 breaking altogether in IE8</div>
			    <div style="text-align: left;">
			        <br>
			    </div>
			    <div style="text-align: left;">2. <a href="https://github.com/mhemesath/r2d3/" class="roll"><span data-title="
			        R2D3
			        ">
			        <b>R2D3</b>
			        </span></a> - use Raphael and D3 together for visualisation</div>
			        <div style="text-align: left;">
			            <br>
			        </div>
			        <div style="text-align: left;">3. <b><a href="http://www.google.com/chromeframe" class="roll"><span data-title=" Google Chrome Frame "> Google Chrome Frame </span></a></b> - Free plug-in for Internet Explorer</div>
			        <div style="text-align: left;">
			            <br>
			        </div>
			        <div style="text-align: left;">4. <b>Feature detect</b> - and use alternative libraries (or revert to tables)</div>
			        <div style="text-align: left;">
			            <br>
			        </div>
			        





			</section>
			            <section style="top: -20px; display: none;" class="future">
				<br>
			                <h2>
			   POSSIBILITIES
			</h2>
			
			<p>Way too much to cover here...</p>


			</section>
			                                        <section style="top: -20px; display: none;" class="future">
			                                            <h2>POSSIBILITIES: GEO</h2>
			<iframe src="http://cartodb.s3.amazonaws.com/tumblr/posts/iframe.html" style="width: 650px;height: 300px;">&amp;amp;amp;amp;amp;amp;amp;amp;#10;</iframe>
			<p>Dynamic maps <br>Source: <a href="http://blog.cartodb.com/post/39680106243/cartodb-makes-d3-maps-a-breeze" class="roll"><span data-title="CartoDB makes D3 maps a breeze">CartoDB makes D3 maps a breeze</span></a>
			</p>







			</section>
			                                            <section style="top: -20px; display: none;" class="future">
			                                                <h2>POSSIBILITIES: MATHS</h2>
			<div>
			    <img src="./D3_files/rhodonea.png">
			    <br>
			</div>
			<div>
				Works well with anything mathematical<br>
			                                               Amazing examples at <a href="http://jasondavies.com/" class="roll"><span data-title="http://jasondavies.com">http://jasondavies.com</span></a>
			</div>

			</section>
			                                                <section style="top: -20px; display: none;" class="future">
			                                                    <h2>POSSIBILITIES:&nbsp;<br>
			LOVELY INTERACTION
			</h2>
			<iframe src="http://alignedleft.com/" style="width: 100.0%;height: 50.0%;">&amp;amp;amp;amp;amp;amp;amp;amp;#10;</iframe>

			<div>
			<br>
			</div>
			<div>
				Use with a light touch for fun effects<br>
			<a href="./D3_files/saved_resource.html" class="roll"><span data-title="http://alignedleft.com">http://alignedleft.com</span></a>
			</div>

			</section>
			            <section style="top: -20px; display: none;" class="future">
				<br>
			                <h2>
			    RESOURCES
			</h2>


			</section>
			
			                                                    <section style="top: -20px; display: none;" class="future">
			                                                        <h2>GETTING STARTED</h2>
			<div>
				Just add one-line to your HTML document
				<pre style="font-size: 0.6em;">
	<span style="color:#AAAA00">&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;</span>
			</pre>
			    <br>
			</div>
			<div>Getting past the conceptual hurdles:<br>the hardest idea in D3</div>
			<div>
			    <br>
			</div>

<pre style="font-size: 1em;">  
d3.select("body")<span style="color:#AAAA00">.selectAll("p")
	.data(dataset)
	.enter()
	.append("p")</span>
	.text("New paragraph!");
</pre>








			</section>
			                                                        <section style="top: -20px; display: none;" class="future">
			                                                            <h2>SCOTT MURRAY'S TUTORIALS</h2>
			<div>
			    <img src="./D3_files/scott-tutorials.png">
			</div>
			<div>
				The best possible starting point<br>
			    Available free at <a href="http://alignedleft.com/tutorials" class="roll"><span data-title="alignedleft.com">alignedleft.com</span></a>
			</div>

			</section>
			                                                           
			                                                                <section style="top: -20px; display: none;" class="future">
			                                                                    <h2>MIKE BOSTOCK'S&nbsp;PAPER</h2>
			<div>
			    <img src="./D3_files/d3-paper.png">
			</div>
			<div>
			    <a href="http://vis.stanford.edu/papers/d3" class="roll"><span data-title="Bostock, Ogievetsky and Heer, 2011">Bostock, Ogievetsky and Heer, 2011</span></a>
			</div>





			</section>
			
			<section style="top: -20px; display: none;" class="future">
          <h2 style="">RESOURCES:</h2>
<div style="letter-spacing: normal;">GETTING STARTED</div>
<br>
<div style="text-align: left;"><a href="http://stackoverflow.com/questions/tagged/d3.js" class="roll"><span data-title="StackOverflow">StackOverflow</span></a> for help</div>
<br>
<div style="text-align: left;"><a href="https://groups.google.com/forum/?fromgroups#!forum/d3-js" class="roll"><span data-title="d3-js Google Group">d3-js Google Group</span></a> for discussion</div>
<br>
<div style="text-align: left;">The <a href="https://github.com/mbostock/d3/wiki/" class="roll"><span data-title="D3 wiki">D3 wiki</span></a> for tutorials and examples</div>
<br>



</section>

			                                                                    <section style="top: -20px; display: none;" class="future">
			                                                                        <h2 style="">RESOURCES:</h2>
			<div style="letter-spacing: normal;">INTERMEDIATE</div>
			<img src="./D3_files/cheat.png">
			<p>Jerome Cukier's <a href="http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf" class="roll"><span data-title="D3 cheat sheet">D3 cheat sheet</span></a> (pdf)</p>


			</section>
			                                                                        <section style="top: -20px; display: none;" class="future">
			                                                                            <h2 style="">RESOURCES:</h2>
			<div style="letter-spacing: normal;">INTERMEDIATE</div>
			<img src="./D3_files/blocks.png">
			<br>
			<p><a href="http://bl.ocks.org/" class="roll"><span data-title="bl.ocks.org">bl.ocks.org</span></a> is where people post examples: follow <a href="http://bl.ocks.org/mbostock" class="roll"><span data-title="Mike Bostock">Mike Bostock</span></a> &amp; <a href="http://bl.ocks.org/jasondavies" class="roll"><span data-title="Jason Davies">Jason Davies</span></a> for inspiration</p>

			</section>
			                                                                            
			                                                                                
<section style="top: -20px; display: none;" class="future">
			                    <h2>My Personal Attempt</h2>
			<a href="http://cal-schools.appspot.com/schools.html"><img src="./D3_files/cal-schools.png"></a>
			
			<p>Source: <a href="http://www.cde.ca.gov/" class="roll"><span data-title="California Dept of Education">California Dept of Education</span></a>
				<br><span class="mini">(Look in Data & Statistics section)</span>
			</p>

			</section>			

<section style="top: -84px; display: block;" class="future">
			                                                                                    <h2>QUESTIONS?</h2>
			                                                                                </section>
			                                                                                			                                                                                </div>



		<div class="progress" style="display: block;"><span style="width: 0px;"></span></div><aside class="controls" style="display: block;"><div class="navigate-left"></div><div class="navigate-right enabled"></div><div class="navigate-up"></div><div class="navigate-down"></div></aside><div class="state-background"></div><div class="pause-overlay"></div></div>

		<script src="./D3_files/head.min.js"></script>
		<script src="./D3_files/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'concave', // default/cube/page/concave/zoom/linear/none

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
					// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script><script type="text/javascript" src="./D3_files/highlight.js"></script><script type="text/javascript" src="./D3_files/zoom.js"></script><script type="text/javascript" src="./D3_files/notes.js"></script>

	

</body></html>